<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./echarts.min.js"></script>
        <script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
    </head>
    <body>

        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 600px;height:400px;"></div>

        <script>
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.getElementById('main'));

	
    
    

    var option ={
        title:{
            text: '角色占比',
            subtext: '每种角色占比展示',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'horizontal',
            right: 250,
            top: 380,
            bottom: 20,
            //x: 'right'
            
        },
        toolbox:{
            show: true,
            feature:{
                // dataZoom:{},
                saveAsImage:{},
                dataView:{},
                // magicType:{
                //     type: ['line', 'bar']
                // },
                restore:{}
            }
        },
        series : [
                {
                    name: '角色名称',
                    type: 'pie',
                    radius : '55%',
                    roseType : 'radius',
                    center: ['40%', '50%'],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
    }    
    myChart.setOption(option)
    $.post("RoleServlet",{method:"pie"},function(data){
   	myChart.setOption({
   		series:[{
   			data: data
   		}]
   	})
    },"json")

    
</script>
    </body>
</html>